﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>

<style>  
    body, html {  
        width: 100%;  
        height: 100%;  
        margin: 0;  
        padding: 0;  
        overflow: hidden;  
        position: relative; /* Ensure the body can contain positioned pseudo-elements */  
        background:url(../example.jpeg) top left no-repeat;
    }
</style> 

</head>
<style type="text/css">
	.back {
		width: 27rem;
		height: 27rem;
		margin: 1rem auto;
		border-radius: 50%;
		background-image: url("");
		background-position: -6.7rem -6.3rem;
		position: relative;
	}

	.time_h {
		width: 12rem;
		height: 0.35rem;
		margin-top: -0.175rem;
		margin-left: -6rem;
	}

	.time_m {
		width: 16rem;
		height: 0.25rem;
		margin-top: -0.125rem;
		margin-left: -8rem;
	}

	.time_s {
		width: 21.4rem;
		height: 0.15rem;
		margin-top: -0.075rem;
		margin-left: -10.7rem;

	}

	.time_h_h {
		width: 6rem;
		height: 0.35rem;
	}

	.time_m_m {
		width: 8rem;
		height: 0.25rem;
	}

	.time_s_s {
		width: 10.7rem;
		height: 0.15rem;

	}

	.time_h_h,
	.time_m_m,
	.time_s_s {
		float: right;
		background: rgba(0, 0, 0, 0.9);
	}

	.time_h,
	.time_m,
	.time_s {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: rotate(-90deg)
	}
</style>

<body>

<div class="back">
	<div class="time_h">
		<div class="time_h_h">

		</div>
	</div>
	<div class="time_m">
		<div class="time_m_m">

		</div>
	</div>
	<div class="time_s">
		<div class="time_s_s">

		</div>
	</div>
</div>

<script type="text/javascript">		
	var divH = document.getElementsByClassName("time_h")
	var divM = document.getElementsByClassName("time_m")
	var divS = document.getElementsByClassName("time_s")
	setInterval(function() {
		var newtime = new Date()
		var h = newtime.getHours()
		var m = newtime.getMinutes()
		var s = newtime.getSeconds()
		console.log(h,m,s)
		divH[0].style.transform = "rotate(" + (-90 + h * 30) + "deg)"
		divM[0].style.transform = "rotate(" + (-90 + m * 6) + "deg)"
		divS[0].style.transform = "rotate(" + (-90 + s * 6) + "deg)"
	}, 1000)
</script>


</body>
</html>
